<template>
  <figure class="baidu">
    <svg
      t="1632169132086"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="1752"
      width="200"
      height="200"
    >
      <path
        d="M226.522 536.053c96.993-20.839 83.792-136.761 80.878-162.089-4.758-39.065-50.691-107.346-113.075-101.952-78.499 7.036-89.957 120.445-89.957 120.445C93.748 444.857 129.764 556.857 226.522 536.053zM329.512 737.61c-2.848 8.175-9.18 29.014-3.686 47.173 10.822 40.707 46.168 42.55 46.168 42.55l50.792 0L422.786 703.169 368.41 703.169C343.952 710.473 332.159 729.468 329.512 737.61zM406.537 341.666c53.572 0 96.859-61.646 96.859-137.9 0-76.12-43.287-137.767-96.859-137.767-53.472 0-96.892 61.646-96.892 137.767C309.645 280.019 353.065 341.666 406.537 341.666zM637.241 350.779c71.598 9.281 117.632-67.141 126.777-125.035 9.349-57.827-36.854-125.036-87.544-136.561-50.791-11.659-114.213 69.688-119.976 122.757C549.597 276.803 565.779 341.566 637.241 350.779zM812.666 691.174c0 0-110.761-85.701-175.425-178.305-87.645-136.593-212.177-81.011-253.822-11.558-41.478 69.452-106.106 113.375-115.286 125-9.314 11.458-133.813 78.666-106.173 201.423 27.64 122.69 124.7 120.345 124.7 120.345s71.53 7.036 154.519-11.524c83.021-18.428 154.484 4.59 154.484 4.59s193.919 64.929 246.988-60.072C895.655 756.037 812.666 691.174 812.666 691.174zM480.881 877.253 354.807 877.253c-54.443-10.855-76.12-48.044-78.867-54.343-2.68-6.433-18.125-36.317-9.951-87.109 23.52-76.12 90.627-81.614 90.627-81.614l67.107 0 0-82.485 57.157 0.871L480.88 877.253zM715.674 876.382l-145.07 0c-56.219-14.508-58.866-54.444-58.866-54.444L511.738 661.49l58.866-0.938 0 144.199c3.586 15.345 22.682 18.159 22.682 18.159l59.771 0L653.057 661.49l62.618 0L715.675 876.382zM921.051 448.006c0-27.708-23.018-111.13-108.385-111.13-85.501 0-96.925 78.732-96.925 134.382 0 53.136 4.489 127.313 110.695 124.935C932.677 593.846 921.051 475.881 921.051 448.006z"
        p-id="1753"
        fill="#407af5"
      ></path>
    </svg>
    <div class="red-blue"></div>
  </figure>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
</script>

<style lang="scss" scoped>
@keyframes baidu {
  0% {
    opacity: 0.5;
    transform: scale(0.9);
  }

  10% {
    opacity: 1;
    transform: scale(1);
  }

  20% {
    transform: scale(0.9);
  }

  30% {
    opacity: 1;
    transform: scale(1);
  }

  40% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(1);
  }

  50% {
    transform: rotate(-5deg);
  }

  55% {
    transform: rotate(5deg);
  }

  60% {
    transform: rotate(-5deg);
  }

  65% {
    transform: rotate(5deg);
  }

  70% {
    transform: rotate(-5deg);
  }
  72.5% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}

@keyframes red-blue {
  0% {
    transform: scaleX(0);
  }

  20% {
    transform: scaleX(1);
  }

  90% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

.baidu {
  font-size: 10px;
  width: 30em;
  height: 30em;
  border-radius: 7.5em;
  background: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  .icon {
    width: 20em;
    height: 20em;
    animation: baidu 2s infinite;
    &:last-of-type {
      fill: #407af5;
    }
  }

  .red-blue {
    width: 10em;
    height: 2em;
    border-radius: 2em;
    position: absolute;
    background: linear-gradient(to right, #dd3a41 0%, #dd3a41 50%, #407af5 50%, #407af5);
    bottom: 0;
    left: 50%;
    margin-left: -5em;
    animation: red-blue 2s infinite ease-in-out;
  }
}
</style>
